// 导航
.navbar{
    border:0px;
    border-radius: 0px;
    background: #fff;
    .container{
        .navbar-collapse{
            padding-left: 0;
            padding-right: 0;
            .navbar-nav{
                text-align: center;
                float: none;
                display: flex;
                justify-content: space-between;
    
                li{
                    display: inline-block;
                    float: none;
                    border-bottom: 3px solid #fff;
                    transition: all ease-in-out .3s;
    
                    &:hover{
                        border-bottom: 3px solid #024ec0;
                    }
                }
            }
        }
    }
    @media screen and (max-width:767px){
        .container{
            .navbar-collapse{
                padding-left: 15px;
                padding-right: 15px;
                .navbar-nav{
                    flex-wrap: wrap;
                    li{
                        width: 100%;
                    }
                }
            }
        }
    }
}


// 轮播图
.carousel{
    margin-bottom: 10%;
    .carousel-inner{
        .item{
            .content{
                margin-bottom: 22%;
                h1{
                    font-size: 3em;
                    font-family: OSBold;
                }
                .title{
                    font-family: OSLtalic;
                }
            }
            .avatar{
                display: flex;
                justify-content: center;
                margin-bottom: 4%;
                img{
                    width: 50px;
                    height: 75px;
                }
            }
        }
    }
    // 当前屏幕 <= 870px  max-width:870px 
    @media screen and (max-width:870px){
        .carousel-inner{
            .item{
                .content{
                    h1{
                        font-size: 2.5em;
                    }
                }
            }
        }
    }
    // 当前屏幕 <= 650px  max-width:650px 
    @media screen and (max-width:650px){
        .carousel-inner{
            .item{
                .content{
                    h1{
                        font-size: 2em;
                    }
                    .title{
                        font-size: .7em;
                    }
                }
                .avatar{
                    visibility: hidden;
                }
            }
        }
    }

     // 当前屏幕 <= 500px  max-width:500px 
     @media screen and (max-width:500px){
        .carousel-inner{
            .item{
                .content{
                    margin-bottom: 15%;
                    h1{
                        font-size: 1.5em;
                    }
                    .title{
                        font-size: .5em;
                    }
                }
                .avatar{
                    visibility: hidden;
                }
            }
        }
    }
     // 当前屏幕 <= 370px  max-width:370px 
     @media screen and (max-width:370px){
        .carousel-inner{
            .item{
                .content{
                    margin-bottom: 13%;
                    h1{
                        font-size: 1.2em;
                    }
                    .title{
                        font-size: .3em;
                    }
                }
                .avatar{
                    visibility: hidden;
                }
            }
        }
    }
}

// about
.about{
    width: 100%;
    padding-bottom: 5%;
    border-top:1px solid #024ec0;
    text-align: center;
    .container{
        .top{
            display: flex;
            justify-content: center;
            text-align: center;
            flex-wrap: wrap;
            margin-top: -56px;
            padding-bottom: 6%;
            h1{
                width: 100%;
                text-transform: uppercase;
                font-size: 1.5em;
            }
            .title{
                display: flex;
                letter-spacing: 5px;
                justify-content: space-between;
                width: 15%;
                height: 30px;
                line-height: 30px;
                font-size: 1.5em;
                color: #000;
                background: #fff;

                .content{
                    color: #000;
                }
                .avatar{
                    display: flex;
                    align-items: center;
                    img{
                        height: 7px;
                    }
                }
            }
        }
        .box{
            .list{
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                font-size: 1.3em;
    
                .item{
                    width: 22%;
                    position: relative;
                    overflow: hidden;
                    border: 1px solid #c9c9c9;

                    .picture{
                        display: flex;
                        justify-content: center;
                    }

                    .name{
                        padding: 5%;
                        letter-spacing: 5px;
                    }
                    &:hover .back{
                        top: 0;
                    }
                    .back{
                        position: absolute;
                        left:0;
                        top:-100%;
                        width:100%;
                        height:100%;
                        background: #609bf2;
                        color: #fff;
                        opacity: 0.8;
                        text-align: center;
                        margin: 0 auto;
                        transition: all ease-in-out .3s;
                        .see{
                            margin: 0% 20%;
                            margin-top: 35%;
                            width: 60%;
                            height: 40px;
                            line-height: 40px;
                            border: 2px solid #fff;
                            letter-spacing:5px;
                            &:hover{
                                background: #fcac45;
                            }
                            a{
                                color: #fff;
                            }
                        }
                        .subject{
                            margin-top: 10%;
                            letter-spacing: 5px;
                        }
                        .nickname{
                            text-transform: uppercase;
                            font-size: .8em;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:1000px){
        .container{
            .top{
                .title{
                    width: 20%;
                }
            }
            .box{
                .list{
                    .item{
                        .back{
                            .see{
                                a{
                                    font-size: .8em;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:800px) {
        .container{
            .top{
                margin-top: -51px;
                h1{
                    font-size: 1.3em;
                }
                .title{
                    font-size: 1.3em;
                    width: 20%;
                }
            }
            .box{
                .list{
                    flex-wrap: wrap;
                    .item{
                        width: 47%;
                        margin-bottom: 5%;
                    }
                }
            }
        }
    }
    @media screen and (max-width:650px) {
        .container{
            .top{
                margin-top: -44px;
                h1{
                    font-size: 1em;
                }
                .title{
                    font-size: 1em;
                    width: 25%;
                }
            }
            .box{
                .list{
                    flex-wrap: wrap;
                    .item{
                        width: 47%;
                        margin-bottom: 5%;

                        .name{
                            font-size: .8em;
                        }
                        .back{
                            font-size: .8em;
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width:550px) {
        .container{
            .top{
                margin-top: -35px;
                h1{
                    font-size: .8em;
                }
                .title{
                    font-size: .8em;
                    height: 20px;
                    line-height: 20px;
                    width: 30%;
                }
            }
            .box{
                .list{
                    flex-wrap: wrap;
                    .item{
                        width: 100%;
                        margin-bottom: 5%;

                        .name{
                            font-size: .6em;
                        }
                        .back{
                            font-size: .6em;
                        }
                    }
                }
            }
        }
    }
}


// team
.team{
    padding: 2% 0%;
    color: #fff;
    background: #000;
    opacity: 0.8;
    .container{
        .title{
            text-transform: uppercase;
            margin-bottom: 5%;
            text-align: center;
            span{
                font-family: OSBold;
                font-size: 1.5em;
                letter-spacing: 5px;
            }
        }
        .list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item{
                text-align: center;
                width: 16.6%;
                .avatar{
                    width:8em;
                    height:8em;
                    margin:0 auto;
                    border: 1px solid #c9c9c9;
                    border-radius: 100%;
                    overflow: hidden;
                    margin-bottom: 10%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        width: 90px;
                        height: 90px;
                    }
                }
                .content{
                    font-size: 1.3em;
                }
            }
        }
    }
    @media screen and (max-width:1000px) {
        .container{
            .list{
                .item{
                    width: 33.3%;
                    margin-bottom: 5%;
                }
            }
        }
    }
    @media screen and (max-width:550px) {
        .container{
            .title{
                span{
                    font-size: 1.3em;
                }
            }
            .list{
                .item{
                    width: 50%;
                    margin-bottom: 5%;
                }
            }
        }
    }
}


// guanyu
.guanyu{
    width: 100%;
    padding: 3% 0%;
    margin-bottom: 2%;
    background: linear-gradient(to right , #fff 0% , #fff 70% ,#9c9c9c 30% , #9c9c9c 100%);
    .container{
        .right{
            width: 60%;
            float: right;
            margin-right: -16%;
        }
        .title{
            margin: 3% 0%;
            text-transform: uppercase;
            color: #000;
            span{
                font-family: OSBold;
                font-size: 1.5em;
                letter-spacing: 4px;
            }
        }
        .content{
            width: 45%;
            margin-bottom: 3%;
            h1{
                font-family: OSBold;
                font-size: 1.5em;
                color: #000;
                letter-spacing: 2px;
            }
            p{
                letter-spacing: 2px;
                line-height: 40px;
            }
        }
        .test{
            width: 45%;
            text-align: center;
            a{
                padding: 1% 6%;
                margin-bottom: 25%;
                background: #0153a7;
                color: #fff;
                font-size: 1.5em;
                letter-spacing: 5px;
            }
        }
        .top{
            width: 50%;
            color: #9c9c9c;
            margin-bottom: 3%;
            h1{
                font-size: 1.7em;
                letter-spacing: 5px;
            }
            p{
                font-size: 1.3em;
                text-transform: uppercase;
            }
        }
        .list{
            width: 65%;
            display: flex;
            justify-content: space-between;
            .item{
                display: flex;
                justify-content: center;
                .avatar{
                    position: relative;
                    width: 7em;
                    height: 7em;
                    border: 1px solid #9c9c9c;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 100%;
                    overflow: hidden;
                    img{
                        height: 67px;
                    }
                }
                &:hover .back{
                    top: 0;
                }
                .back{
                    position: absolute;
                    left:0;
                    top:-100%;
                    width:100%;
                    height:100%;
                    background: #609bf2;
                    color: #fff;
                    opacity: 0.8;
                    text-align: center;
                    margin: 0 auto;
                    transition: all ease-in-out .3s;
                    p{
                        height: 7em;
                        line-height: 7em;
                    }
                }
            }
            .jiantou{
                display: flex;
                align-items: center;
            }
        }
    }
    @media screen and (max-width:1000px){
        .container{
            .list{
                flex-wrap: wrap;
                .item{
                    width: 33.3%;
                }
            }
        }
    }

    @media screen and (max-width:770px){
        .container{
            .content{
                p{
                    line-height: 35px;
                }
            }
        }
    }

    @media screen and (max-width:610px){
        .container{
            .title{
                span{
                    font-size: 1.3em;
                }
            }
            .content{
                h1{
                    font-size: 1.3em;
                }
            }
            .test{
                a{
                    font-size: 1.3em;
                }
            }
            .top{
                h1{
                    font-size: 1.5em;
                }
                p{
                    font-size: 1em;
                }
            }
        }
    }

    @media screen and (max-width:500px){
        .container{
            .content{
                p{
                    line-height: 30px;
                }
            }
            .list{
                .item{
                    width: 50%;
                    margin-bottom: 5%;
                }
            }
        }
    }
}

// news
.news{
    background: #024ec0;
    margin-bottom: 10%;
    display: flex;
    align-items: center;
    .container{
        height: 80%;
        margin-top: 5%;
        margin-bottom: 5%;
        background: #fff;
        border-top:1px solid #024ec0;
        text-align: center;
        .top{
            padding-top: 2%;
            display: flex;
            justify-content: center;
            text-align: center;
            flex-wrap: wrap;
            padding-bottom: 2%;
            h1{
                width: 100%;
                text-transform: uppercase;
                font-size: 1.5em;
            }
            .title{
                display: flex;
                letter-spacing: 5px;
                justify-content: space-between;
                height: 30px;
                line-height: 30px;
                font-size: 1.5em;
                color: #000;
                background: #fff;

                .content{
                    color: #000;
                    width: 15%;
                }
                .avatar{
                    display: flex;
                    align-items: center;
                    img{
                        height: 7px;
                    }
                }
            }
        }
        .list{
            display: flex;
            justify-content: space-between;
            .item{
                width: 58%;
                .box{
                    margin-left: 2%;
                    display: flex;
                    // align-items: center;
                    border-bottom: 2px dashed #c9c9c9;
                    .avatar{
                        padding: 2% 0%;
                    }
                    .text{
                        text-align: left;
                        padding-left: 2%;
                        h1{
                            font-size: 5em;
                            color: #0153a7;
                            height: 120px;
                        }
                        p{
                            text-transform: uppercase;
                        }
                    }
                }
            }
            .right{
                width: 38%;
                .img{
                    padding: 3% 0%; 
                }
            }
        }
    }

    @media screen and (max-width:1200px) {
        .container{
            .top{
                .title{
                    .content{
                        width: 20%;
                    }
                }
            }
            .list{
                .right{
                    .img{
                        padding: 8% 0%;
                    }
                }
            }
        }
    }

    @media screen and (max-width:990px) {
        .container{
            .top{
                .title{
                    .content{
                        width: 30%;
                    }
                }
            }
            .list{
                .item{
                    width: 55%;
                    .box{
                        height: 150px;
                        .text{
                            h1{
                                font-size: 3em;
                                height: 60px;
                            }
                        }
                    }
                }
            }
        }
    }

    
    @media screen and (max-width:900px) {
        .container{
            .top{
                .title{
                    .content{
                        width: 30%;
                    }
                }
            }
            .list{
                flex-wrap: wrap;
                .item{
                    width: 100%;
                    .box{
                        height: 150px;
                        margin-bottom: 3%;
                        .avatar{
                            img{
                                width: 8em;
                                height: 8em;
                            }
                        }
                        .text{
                            h1{
                                font-size: 3em;
                                height: 90px;
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:700px) {
        .container{
            .top{
                .title{
                    .content{
                        width: 50%;
                    }
                }
            }
            .list{
                flex-wrap: wrap;
                .item{
                    width: 100%;
                    .box{
                        height: 150px;
                        margin-bottom: 3%;
                        .avatar{
                            img{
                                width: 8em;
                                height: 8em;
                            }
                        }
                        .text{
                            h1{
                                font-size: 3em;
                                height: 90px;
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:580px) {
        .container{
            .top{
                h1{
                    font-size: .7em;
                }
                .title{
                    .content{
                        width: 80%;
                        font-size: .7em;
                    }
                }
            }
            .list{
                flex-wrap: wrap;
                .item{
                    width: 100%;
                    .box{
                        height: 150px;
                        margin-bottom: 3%;
                        .avatar{
                            img{
                                width: 8em;
                                height: 8em;
                            }
                        }
                        .text{
                            h1{
                                font-size: 2em;
                                height: 60px;
                            }
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width:400px) {
        .container{
            .top{
                h1{
                    font-size: .5em;
                }
                .title{
                    .content{
                        width: 100%;
                        font-size: .5em;
                    }
                }
            }
            .list{
                flex-wrap: wrap;
                .item{
                    width: 100%;
                    .box{
                        height: 150px;
                        margin-bottom: 3%;
                        .avatar{
                            img{
                                width: 8em;
                                height: 8em;
                            }
                        }
                        .text{
                            h1{
                                font-size: 2em;
                                height: 60px;
                            }
                            p{
                                font-size: .7em;
                            }
                        }
                    }
                }
            }
        }
    }
}


// cnat
.cnat{
    width: 100%;
    // padding-bottom: 3%;
    border-top:1px solid #024ec0;
    .container{
        .top{
            display: flex;
            justify-content: center;
            text-align: center;
            flex-wrap: wrap;
            margin-top: -56px;
            padding-bottom: 6%;
            h1{
                width: 100%;
                text-transform: uppercase;
                font-size: 1.5em;
            }
            .title{
                display: flex;
                letter-spacing: 5px;
                justify-content: space-between;
                width: 15%;
                height: 30px;
                line-height: 30px;
                font-size: 1.5em;
                color: #000;
                background: #fff;

                .content{
                    color: #000;
                }
                .avatar{
                    display: flex;
                    align-items: center;
                    img{
                        height: 7px;
                    }
                }
            }
        }
        .box{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 5%;
            .lianxi{
                width: 28%;
                margin-bottom: 5%;
                .dizhi{
                    padding: 3% 0%;
                    h1{
                        letter-spacing: 4px;
                    }
                    p{
                        letter-spacing: 4px;
                        padding: 2% 0%;
                    }
                }
                .fangfa{
                    h1{
                        letter-spacing: 4px;
                    }
                    .tel{
                        padding: 3% 0%;
                        border-bottom: 1px dashed #9c9c9c;
                    }
                    .fax{
                        padding: 3% 0%;
                        border-bottom: 1px dashed #9c9c9c;
                    }
                    .web{
                        padding: 3% 0%;
                        border-bottom: 1px dashed #9c9c9c;
                    }
                    .email{
                        padding: 3% 0%;
                    }
                }
            }
            .map{
                width: 67%;
                height: auto;
                background: black;
                margin-bottom: 5%;
            }
            .zaixian{
                width: 30%;
                h1{
                    letter-spacing: 4px;
                }
                .name{
                    height: 30px;
                    padding-left: 3%;
                    margin: 8% 0%;
                    letter-spacing: 10px;
                    border: 1px solid #9c9c9c;
                    input{
                        width: 100%;
                        height: auto;
                    }
                }
                .phone{
                    height: 30px;
                    padding-left: 3%;
                    margin: 8% 0%;
                    letter-spacing: 10px;
                    border: 1px solid #9c9c9c;
                    input{
                        width: 100%;
                        height: auto;
                    }
                }
                .email{
                    height: 30px;
                    padding-left: 3%;
                    margin: 8% 0%;
                    letter-spacing: 10px;
                    border: 1px solid #9c9c9c;
                    input{
                        width: 100%;
                        height: auto;
                    }
                }
            }
            .neirong{
                width: 60%;
                .content{
                    margin-top: 10%;
                    height: 80px;
                    margin-bottom: 4%;
                    border: 1px solid #9c9c9c;
                    input{
                        width: 100%;
                        height: auto;
                    }
                }
                .tijiao{
                    background: #024ec0;
                    text-align: center;
                    width: 25%;
                    height: 35px;
                    line-height: 35px;
                    a{
                        color: #fff;
                        font-size: 1.2em;
                    }
                }
            }
        }
    }

    @media screen and (max-width:1000px){
        .container{
            .top{
                .title{
                    width: 20%;
                }
            }
        }
    }

    @media screen and (max-width:800px) {
        .container{
            .top{
                margin-top: -51px;
                h1{
                    font-size: 1.3em;
                }
                .title{
                    font-size: 1.3em;
                    width: 20%;
                }
            }
        }
    }
    @media screen and (max-width:650px) {
        .container{
            .top{
                margin-top: -44px;
                h1{
                    font-size: 1em;
                }
                .title{
                    font-size: 1em;
                    width: 25%;
                }
            }
            .box{
                .lianxi{
                    width: 100%;
                }
                .map{
                    margin: 0%;
                }
            }
        }
    }
    @media screen and (max-width:550px) {
        .container{
            .top{
                margin-top: -35px;
                h1{
                    font-size: .8em;
                }
                .title{
                    font-size: .8em;
                    height: 20px;
                    line-height: 20px;
                    width: 30%;
                }
            }
            .box{
                padding: 0%;
                flex-direction: column;
                .zaixian{
                    width: 40%;
                }
                .neirong{
                    width: 100%;
                    .tijiao{
                        a{
                            font-size: 1em;
                        }
                    }
                }
            }
        }
    }
}
